<template>
  <!-- 精选题库页面 -->
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题按钮 -->
      <el-row
        type="flex"
        class="row-bg"
        justify="space-between"
        style="padding-bottom: 15px"
      >
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          size="small"
          style="width:97px"
          icon="el-icon-edit"
          @click="$router.push({path:'/questions/new'})"
        >新增试题
        </el-button>
      </el-row>
      <!-- 表单区域 -->
      <inputPage
        @getsubjectID="getsubjectID"
        :data="data"
        @getAllsubjectList="getAllsubjectList"
      ></inputPage>
      <!-- 导航区域 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 提示信息 -->
        <el-alert
          style="margin-bottom: 15px"
          :title="countText"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
        <el-tab-pane label="全部" name="first">
          <tablePage
            @getAllsubjectList="getAllsubjectList"
            activeName="first"
            :tableData="tableData"
          ></tablePage>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <tablePage
            @getAllsubjectList="getAllsubjectList"
            activeName="second"
            :tableData="tableData"
          ></tablePage>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <tablePage
            @getAllsubjectList="getAllsubjectList"
            activeName="third"
            :tableData="tableData"
          ></tablePage>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <tablePage
            @getAllsubjectList="getAllsubjectList"
            activeName="fourth"
            :tableData="tableData"
          ></tablePage>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页器 -->
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="5"
          layout="prev,pager,next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import inputPage from '../components/choice/input.vue'
import tablePage from '../components/choice/table.vue'
import { allsubjectList } from '@/api/hmmm/choice'
// 导入格式化时间的函数
import { parseTime, html2Text } from '@/utils/index.js'
export default {
  name: 'indexPage',
  components: { inputPage, tablePage },
  data () {
    return {
      data: {
        page: 1, // 当前页数
        pagesize: 5, // 总条数
        chkState: null, // 审核状态： 0 待审核 1 通过 2 拒绝
        subjectID: null, // 学科id
        keyword: null // 关键字
      },
      tableData: [], // 保存的是要渲染的题库列表
      activeName: 'first',
      counts: 0
    }
  },
  computed: {
    countText () {
      return `数据一共 ${this.counts} 条`
    }
  },
  created () {
    this.getAllsubjectList()
  },
  watch: {},
  methods: {
    getCounts (counts) {
      this.counts = counts
    },
    async getAllsubjectList () {
      try {
        if (this.activeName === 'first') {
          // 全部题库列表
          this.data.chkState = null
        } else if (this.activeName === 'second') {
          // 待审核题库列表
          this.data.chkState = 0
        } else if (this.activeName === 'third') {
          // 已审核题库列表
          this.data.chkState = 1
        } else if (this.activeName === 'fourth') {
          // 已拒绝题库列表
          this.data.chkState = 2
        }
        // 获取题库列表
        const { data } = await allsubjectList(this.data)
        // 将获取到的数据里面的时间格式化
        data.items.forEach((item) => {
          item.addDate = parseTime(item.addDate)
          item.answer = html2Text(item.answer)
          item.question = html2Text(item.question)
        })
        // 把获取的数据赋值给tableData用来渲染页面
        this.tableData = data.items
        this.counts = data.counts
      } catch (err) {
        this.$message(err)
      }
    },
    // 切换tab时触发
    handleClick () {
      this.getAllsubjectList(this.data)
    },
    // 当每页显示的条目个数发生变化时触发
    handleSizeChange (val) {
      // 将当前每页条数给pagesize，获取最新条数的数据
      this.data.pagesize = val
      this.getAllsubjectList(this.data)
    },
    // 当前页数改变时触发
    handleCurrentChange (val) {
      // 将当前页给page，获取当前页的数据
      this.data.page = val
      this.getAllsubjectList(this.data)
    },
    // 获取学科id，用来搜索数据
    getsubjectID (id, keyword) {
      this.data.subjectID = id
      this.data.keyword = keyword
    }
  }
}
</script>

<style scoped>
.container {
  padding: 10px;
}
.box-card {
  width: 100%;
}
.row-bg  {
  font-size: 12px;
  color: pink;
  line-height: 12px;
}
</style>
